<template>
  <div class="settings-container">
    <el-page-header title="返回" content="设置" />
    
    <el-divider content-position="left">
      <el-tag size="large" effect="dark" type="info">翻译模型配置</el-tag>
    </el-divider>
    
    <div class="settings-section">
      <h2>翻译模型配置</h2>
      <div class="model-config-panel">
        <el-select v-model="selectedModel" placeholder="请选择翻译模型">
          <el-option
            v-for="(label, key) in translationModels"
            :key="key"
            :label="label"
            :value="key"
          />
        </el-select>
        <el-button type="primary" @click="openConfigDialog" :disabled="!selectedModel">配置</el-button>
      </div>
    </div>

    <!-- DeepSeek模型配置对话框 -->
    <el-dialog
      v-model="configDialogVisible"
      :title="`配置${getModelLabel()}`"
      width="500px"
    >
      <el-form :model="modelConfig" label-width="120px">
        <el-form-item label="API密钥">
          <el-input v-model="modelConfig.apiKey" placeholder="请输入API密钥" />
        </el-form-item>
        <el-form-item label="API基础URL">
          <el-input v-model="modelConfig.baseUrl" placeholder="请输入API基础URL" />
        </el-form-item>
        <el-form-item label="模型名称">
          <el-input v-model="modelConfig.modelName" placeholder="请输入模型名称" />
        </el-form-item>
        <el-form-item label="温度">
          <el-slider v-model="modelConfig.temperature" :min="0" :max="1" :step="0.1" show-input />
        </el-form-item>
        <el-form-item label="最大Token数">
          <el-input-number v-model="modelConfig.maxTokens" :min="1" :max="8192" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="configDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveModelConfig">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, computed } from 'vue';
import { TranslationModels } from '../config/languages';
import { ModelConfig, defaultModelConfig, ModelConfigReader, ModelConfigWriter } from '../config/ModelConfig';
import { ElMessage } from 'element-plus';

export default defineComponent({
  name: 'SettingsView',
  setup() {
    const translationModels = computed(() => TranslationModels);
    const selectedModel = ref('');
    const configDialogVisible = ref(false);
    const modelConfig = reactive({
      apiKey: '',
      baseUrl: '',
      modelName: '',
      temperature: 0.7,
      maxTokens: 2048
    });

    const getModelLabel = () => {
      return selectedModel.value ? TranslationModels[selectedModel.value as keyof typeof TranslationModels] : '';
    };

    const openConfigDialog = async () => {
      if (!selectedModel.value) return;
      
      try {
        const config = await ModelConfigReader.read(selectedModel.value);
        modelConfig.apiKey = config.apiKey;
        modelConfig.baseUrl = config.baseUrl;
        modelConfig.modelName = config.modelName;
        modelConfig.temperature = config.temperature || 0.7;
        modelConfig.maxTokens = config.maxTokens || 2048;
      } catch (error) {
        // 如果读取失败，使用默认配置
        const defaultConfig = defaultModelConfig[selectedModel.value];
        if (defaultConfig) {
          modelConfig.apiKey = defaultConfig.apiKey;
          modelConfig.baseUrl = defaultConfig.baseUrl;
          modelConfig.modelName = defaultConfig.modelName;
          modelConfig.temperature = defaultConfig.temperature || 0.7;
          modelConfig.maxTokens = defaultConfig.maxTokens || 2048;
        }
      }
      
      configDialogVisible.value = true;
    };

    const saveModelConfig = async () => {
      if (!selectedModel.value) return;
      
      try {
        // 读取现有配置
        let currentConfig: ModelConfig = {};
        try {
          // 使用IPC通信读取所有模型配置
          const config = await window.electronAPI.readModelConfig('');
          if (config) {
            currentConfig = config;
          }
        } catch (error) {
          // 通信错误，使用空对象
        }
        
        // 更新当前选中模型的配置
        currentConfig[selectedModel.value] = {
          apiKey: modelConfig.apiKey,
          baseUrl: modelConfig.baseUrl,
          modelName: modelConfig.modelName,
          temperature: modelConfig.temperature,
          maxTokens: modelConfig.maxTokens
        };
        
        // 保存配置
        await ModelConfigWriter.write(currentConfig);
        
        ElMessage.success('配置保存成功');
        configDialogVisible.value = false;
      } catch (error) {
        ElMessage.error(`保存配置失败: ${error instanceof Error ? error.message : String(error)}`);
      }
    };

    return {
      translationModels,
      selectedModel,
      configDialogVisible,
      modelConfig,
      getModelLabel,
      openConfigDialog,
      saveModelConfig
    };
  }
});
</script>

<style scoped>
.settings-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.settings-section {
  margin-bottom: 30px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
}

.settings-section:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
}

.model-config-panel {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 15px;
  background-color: #f9fafc;
  padding: 15px;
  border-radius: 4px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.el-divider {
  margin: 24px 0;
}

.el-page-header {
  margin-bottom: 20px;
}
</style>